<template class="dashboard-container">
    <div align="center">
        <div style="margin-top: 15px;">
            <h3>修改</h3>
        </div>
        <el-divider></el-divider>
        <div style="margin: 20px; max-width: 800px;">
            <el-form 
                :model="formLabelAlign" 
                :rules="rules" 
                ref="formRef"
                label-width="100px">
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="账号:" prop="account">
                            <el-input v-model="formLabelAlign.account"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="名称:" prop="name">
                            <el-input v-model="formLabelAlign.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年龄:" prop="age">
                            <el-input v-model="formLabelAlign.age"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别:" prop="gender">
                            <el-input v-model="formLabelAlign.gender"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="账号权限:" prop="role">
                            <el-select v-model="formLabelAlign.role" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话号码:" prop="number">
                            <el-input v-model="formLabelAlign.number"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="密码:" prop="password">
                            <el-input 
                                v-model="formLabelAlign.password" 
                                type="password" 
                                show-password
                                placeholder="6-18位，必须包含小写字母">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 30px;">
                    <el-col :span="24" style="text-align: center;">
                        <el-button type="primary" @click="submitForm()">确 定</el-button>
                        <el-button @click="back()" style="margin-left: 30px;">取 消</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider></el-divider>
        </div>
    </div>
</template>
<script>
import { selectById, update } from '@/api/AdminManafe'
export default {
    data() {
        // 自定义验证规则
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('电话号码不能为空'));
            }
            const reg = /^1[3-9]\d{9}$/;
            if (!reg.test(value)) {
                callback(new Error('请输入正确的手机号码'));
            } else {
                callback();
            }
        };
        
        const validateAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            if (!Number.isInteger(Number(value)) || value < 0 || value > 150) {
                callback(new Error('请输入有效的年龄(0-150)'));
            } else {
                callback();
            }
        }; // 自定义密码验证规则
        const validatePassword = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入密码'));
            }
            if (value.length < 6 || value.length > 18) {
                callback(new Error('密码长度必须在6到18个字符之间'));
            } else if (!/[a-z]/.test(value)) {
                callback(new Error('密码必须包含至少一个小写字母'));
            } else {
                callback();
            }
        };

        return {
            labelPosition: 'left',
            formLabelAlign: {
                name: '',
                author: '',
                press: '',
                isbn: '',
                publishTime: '',
                price: '',
                storage: '',
                password: '',
            },
            options: [{
                value: '管理员',
                label: '管理员'
            }, {
                value: '超级管理员',
                label: '超级管理员'
            }],
            // 验证规则
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                age: [
                    { validator: validateAge, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                role: [
                    { required: true, message: '请选择账号权限', trigger: 'change' }
                ],
                number: [
                    { validator: validatePhone, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: validatePassword, trigger: 'blur' }
                ]
            }
        }
    },

    created() {
        this.sel()
    },

    methods: {
        sel() {
            this.res = this.$route.query.id
            selectById(this.$route.query.id).then(res => {
                this.formLabelAlign = res.data.data
            })
        },
        submitForm() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.upd();
                } else {
                    this.$message.error('请检查表单填写是否正确');
                    return false;
                }
            });
        },
        upd() {
            update(this.formLabelAlign).then(res => {
                //修改成功
                this.$message.success("修改成功");
                //重新查询数据
                this.$router.push('/AdminManage/AdminManage');
            }).catch(error => {
                this.$message.error("修改失败: " + error.message);
            });
        },
        back() {
            this.$router.push('/AdminManage/AdminManage');
        }
    }
}
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
}

.el-form-item {
    margin-bottom: 22px;
}

.el-input, .el-select {
    width: 100%;
}

.el-button {
    width: 100px;
}
</style>